<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>获得焦点事件&失去焦点事件</title>
</head>
<body>
<form action="#" method="post">
    <p>
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
        <span id="username_err" style="color: red;display: none;">用户名长度不符合要求，请重新输入</span>
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="text" name="password" id="password">
        <span id="password_err" style="color: red;display: none;">密码长度不符合要求，请重新输入</span>
    </p>
    <p>
        性别：
        <input type="radio" name="gender" id="man">
        <label for="man">男</label>
        <input type="radio" name="gender" id="woman">
        <label for="woman">女</label>
    </p>

    <p>
        <label for="age">年龄</label>
        <input type="number" name="age" id="age">
    </p>

    <p>
        <input type="submit" value="注册">
    </p>

</form>

<script>
    /*
        1、验证用户名，当用户名输入框失去焦点的生活，判断输入的内容是否符合要求：长度6~12位，不符合要求的弹窗，要求重新输入。
     */
    var usernameInput=document.getElementById("username");
    //onblur事件，是失去焦点事件
    usernameInput.onblur=function () {
        //usernameInput.value 获取用户在输入框中输入的内容，
        //通过trim()消除前后的空格
        let username=usernameInput.value.trim();
        //alert(username)
        if (username.length<6||username.length>12){
            document.getElementById("username_err").style.display='';
        }else {
            document.getElementById("username_err").style.display='none';
        }
    }

    /*
        2、校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位规则，
        不符合使 id='password_err' 的span标签显示出来，给出用户提示。
     */


</script>


</body>
</html>